<!DOCTYPE html>
<html class="no-js" lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>详情页</title>
    <meta name="description" content="Xolio - Creative Agency Template" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Place favicon.ico in the root directory -->

    <!-- CSS here -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="static/css/animate.min.css" />
    <link rel="stylesheet" href="static/css/magnific-popup.css" />
    <link rel="stylesheet" href="static/css/fontawesome-all.min.css" />
    <link rel="stylesheet" href="static/css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="static/css/odometer.css" />
    <link rel="stylesheet" href="static/css/slick.css" />
    <link rel="stylesheet" href="static/css/default.css" />
    <link rel="stylesheet" href="static/css/style.css" />
    <link rel="stylesheet" href="static/css/responsive.css" />

    <style>
      .login_bg {
        width: 100vw;
        height: 100vh;
        position: relative;
      }

      .login_left {
        position: absolute;
        width: 50%;
        height: 100%;
        background-image: url(../pc/static/image/login_bj.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .login_left img {
        width: 80px;
        position: absolute;
        top: 35px;
        left: 40px;
      }
      .login_left .slogin {
        position: absolute;
        top: 40%;
        left: 60px;
      }
      .login_left .slogin h2 {
        font-size: 26px;
        font-weight: 600;
        padding: 0;
        color: #191a39;
        margin-bottom: 50rpx;
      }
      .login_left .slogin p {
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        color: #191a39;
        line-height: 40px;
      }
      .login_right {
        width: 50%;
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        right: 0;
        overflow: hidden;
      }
      .right_box {
        position: absolute;
        top: 20px;
        right: 50px;
      }
      .login_right .form_box {
        width: 500px;
        margin: 0 15%;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        padding: 30px;
        position: absolute;
        top: 20%;
        border-radius: 10px;
        left: 50%;
        margin-left: -250px;
      }
      .login_right .form_box img {
        width: 100px;
        margin-top: 20px;
        margin-bottom: 40px;
        margin-left: calc(50% - 50px);
      }

      .login_right .form-grp {
        position: relative;
        margin-bottom: 24px;
      }
      .login_right .form-grp input {
        width: 100%;
        border: 1px solid #e3e3e3;
        backdrop-filter: blur(21px);
        background: transparent;
        border-radius: 15px;
        letter-spacing: 0.0833333px;
        color: #AAAAAA;
        font-size: 16px;
        padding: 22px 30px 22px 25px;
        height: 50px;
        display: block;
      }
      .login_right .trip_box{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin:30px 0;
      }
      .login_right .trip_box .radio{
        display: flex;
        align-items: center;
      }
      .login_right .trip_box input{
        width: 16px;
        height: 16px;
        border:1px solid #D9D9D9;
        border-radius: 4px;
        margin-right: 5px;
      }
      .login_right .trip_box label{
        color: #AAAAAA;
        font-size: 14px;
      }

      .login_right .trip_box a{
        color: #2B5B99;
        font-size: 14px;
      }


      .login_right .btn_box{
        width: 100%;
        display: flex;
        justify-content: space-between;
       margin-bottom: 30px;
      }
      .login_right .btn_box .btn{
        width: 45%;
        height: 50px;
        line-height: 50px;
        color: #16D0C0;
        font-size: 16px;
        border:1px solid #16D0C0;
        background-color: #fff;
        line-height: 50px;
        text-align: center;
        border-radius: 8px;
        padding:0;
      }
      .login_right .btn_box .btn2{
        color: #000000;
        border:none;
        background: linear-gradient(to right, #0ACEC3, #FDFE94);
      }
    </style>
  </head>
  <body>
    <!--loading-->
    <div id="preloader">
      <div id="loader" class="loader">
        <div class="loader-container">
          <div class="loader-icon">
            <img src="static/picture/preloader.png" alt="Preloader" />
          </div>
        </div>
      </div>
    </div>
    <!--loading -->

    <!-- 鼠标特效 -->
    <div class="mouseCursor cursor-outer"></div>
    <div class="mouseCursor cursor-inner"><span>Drag</span></div>
    <!-- 鼠标特效 -->

    <div class="login_bg">
      <div class="login_left">
        <img src="static/picture/preloader.png" alt="Preloader" />
        <div class="slogin">
          <h2>我们的愿景</h2>
          <p>致力于外汇返佣第一品牌</p>
          <p>九鼎返佣网，您外汇交易的贴身管家</p>
        </div>
      </div>
      <div class="login_right">
        <div class="navbar-wrap main-menu d-none d-lg-flex">
          <ul class="navigation right_box">
            <li class="menu-item-has-children">
              <a href="#">中文</a>
              <ul class="sub-menu">
                <li><a href="about-me.html">英文</a></li>
              </ul>
            </li>
          </ul>

          <div class="form_box">
            <img src="static/picture/preloader.png" />
            <form action="#">
              <div class="form-grp">
                <input type="text" id="name" placeholder="请输入您的电子邮箱" />
              </div>
              <div class="form-grp">
                <input type="text" id="phone" placeholder="请输入您的密码" />
              </div>

              <div class="trip_box">
                <div class="radio">
                  <input type="radio" id="apple" name="fruit" value="apple">
                  <label for="apple">记住我</label><br>
                </div>
                <a>忘记密码?</a>
              </div>

              <div class="btn_box">
                <button type="submit" class="btn">注册<span></span></button>
                <button type="submit" class="btn btn2">登录<span></span></button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- JS here -->
    <script src="static/js/jquery-3.6.0.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/isotope.pkgd.min.js"></script>
    <script src="static/js/imagesloaded.pkgd.min.js"></script>
    <script src="static/js/jquery.magnific-popup.min.js"></script>
    <script src="static/js/jquery.odometer.min.js"></script>
    <script src="static/js/swiper-bundle.min.js"></script>
    <script src="static/js/jquery.appear.js"></script>
    <script src="static/js/slick.min.js"></script>
    <script src="static/js/ajax-form.js"></script>
    <script src="static/js/parallax.min.js"></script>
    <script src="static/js/jquery.parallaxScroll.min.js"></script>
    <script src="static/js/tween-max.js"></script>
    <script src="static/js/wow.min.js"></script>
    <script src="static/js/main.js"></script>
  </body>
</html>
